<script setup lang="ts">
type Props = {
  list?: [];
  // 三种状态
  step?: number;
};
let prop = withDefaults(defineProps<Props>(), {
  step: 0,
  list: () => [],
});
</script>

<template>
  <div class="navs">
    <template v-for="(v, k) of list" :key="k">
      <!-- 步调 -->
      <div
        class="speed"
        :class="step > k ? 'already' : step == k ? 'current' : ''"
      >
        <span class="num">{{ k + 1 }}</span>
        <span class="txt">{{ v }}</span>
      </div>
      <!-- 横线(最后一个不需要画横线) -->
      <div
        class="line"
        :class="k < step ? 'lineAlready' : ''"
        v-if="k < list.length - 1"
      ></div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.navs {
  margin-top: 54px;
  @include flexCenter;
  gap: 0px 10px;
}

// 步调(开始默认未选中的状态)--
.speed {
  @include flexCenter;
  gap: 0px 10px;

  // 数值小图标
  .num {
    width: 24px;
    height: 24px;
    @include flexCenterCenter;
    background-color: #e5e5e5;
    border-radius: 50%;
    overflow: hidden;
    font-size: 16px;
    color: #ffffff;
  }
  .txt {
    font-size: 18px;
    color: #babfc9;
  }
}
// 步调(开始默认未选中的状态)==

// 已经完成了
.already {
  > .num {
    background-color: #2163e0 !important;
  }
  > .txt {
    color: #333333 !important;
  }
}
// 当前状态
.current {
  > .num {
    background-color: #2163e0 !important;
  }
  > .txt {
    color: #2163e0 !important;
  }
}

// 灰色短线
.line {
  width: 100px;
  height: 2px;
  background-color: #e5e5e5;
}

// 线条完成的状态
.lineAlready {
  background-color: #2163e0 !important;
}
</style>
